<template>
  <view class="padding-lg bg-gray" style="min-height:100vh">
    <evan-form :hide-required-asterisk="true" :label-style="labelStyles" 
        ref="form" :model="formInfo">
      
      <view v-for="(it, i) in selectedDistricts" :key="i">
        <view class="title-dec">
          {{it.name}}
        </view>

        <view class="flex">
          <view style="width:100%">
            <evan-form-item label="次密接人数：" :prop="`${it.code}_t`" label-position="top">
              <view class="i-input">
                <input type="number" v-model="formInfo[`${it.code}_t`]" placeholder="请输入" />
              </view>
            </evan-form-item>
          </view>
        </view>
      </view>

      <view class="margin-top-xl">
        <button :disabled="submiting" @click="onSubmit" class="cu-btn lg btn-fluid bg-primary">上报</button>
      </view>
    </evan-form>
  </view>
</template>

<script>
import CheckAuthMixin from '@/mixins/CheckAuthMixin'

const CACHE_KEY = 'ts_matters_submiting'

const FormInfo = {
}

export default {
  mixins: [
    CheckAuthMixin,
  ],
  data() {
    return {
      labelStyles: {
        minWidth: '150px',
        textAlign: 'justify',
        paddingRight: '30upx',
        fontSize: '30upx',
        color: 'inherit',
      },
      submiting: false,
      formInfo: Object.assign({}, FormInfo),
      
      selectedDistricts: [
        { name: '路北区', code: 'lb' },
        { name: '路南区', code: 'ln' },
      ],
    }
  },
  watch: {
    submiting(val) {
      if (val) {
        uni.showLoading()
      } else {
        uni.hideLoading()
      }
    },
  },
  computed: {
    formRules() {
      let ret = {}
      this.selectedDistricts.forEach(x => {
        ret[`${x.code}_t`] = [{ required: true, message: `请输入${x.code}_t` }]
      })
      return ret
    },
  },
  onLoad(opts) {
    this.loadState()
    this.$utils.pLog('== onLoad: ', this.formInfo)
  },
  methods: {
    loadState() {
      const cached = this.$utils.tempPageData.get(CACHE_KEY)
      if (cached) {
        let obj = {}
        this.selectedDistricts.forEach(x => {
          obj[`${x.code}_t`] = ''
        })
        Object.assign(this.formInfo, obj)
      }

      setTimeout(() => {
        this.$refs.form.setRules(this.formRules)
      }, 333)
    },
    onSubmit() {
      this.$refs.form.validate((res) => {
        if (res) {
          let obj = {}
          this.selectedDistricts.forEach(x => {
            obj[x.code] = {
              t: this.formInfo[`${x.code}_t`],
            }
          })
          this.$utils.pLog('== submiting: ', {
            formInfo: this.formInfo, 
            obj
          })

          // TODO:
          const cached = this.$utils.tempPageData.get(CACHE_KEY)

          uni.navigateBack()
        }
      })
    },
  },
}
</script>

<style scoped>
</style>